<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_全屏遮罩层</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.3);
            position: fixed;

        }
    </style>
</head>
<body>
<div class="mask"></div>
<div >
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iure placeat sapiente suscipit temporibus! A
        architecto debitis deleniti eveniet id illum iste iusto magnam nesciunt officia perferendis, placeat provident
        suscipit?
    </div>
    <div>Dicta fugit maxime neque nostrum rerum? Alias aperiam asperiores dolore eius eum expedita illo ipsam labore
        laborum magnam, maiores maxime, molestiae nam nostrum numquam omnis quidem similique sint veniam voluptas.
    </div>
    <div>Accusantium ad architecto debitis dicta dolor eius eos eum exercitationem, fugit harum illo in inventore
        itaque, molestias numquam quidem quos reiciendis repellat repellendus similique, totam voluptatibus voluptatum.
        Dignissimos, veniam, voluptate!
    </div>
    <div>Eaque praesentium quidem sapiente? Aliquid, atque, ullam? Ad amet aperiam ipsam quasi voluptates? Ad dolores
        eaque enim facilis fuga iusto libero magnam nam, nobis possimus, quae quam rem repudiandae sapiente?
    </div>
    <div>Beatae blanditiis, corporis error esse est fuga illo laborum quos sapiente sequi. Ad culpa, deleniti,
        dignissimos error illo ipsa laborum optio perferendis provident quia ratione saepe tempora vel? Aliquam,
        voluptates!
    </div>
    <div>Beatae dolorum ea inventore natus neque quo repudiandae velit? Animi distinctio eaque error eum fugit molestias
        odio omnis perferendis quae quas qui, quidem rem sed soluta veritatis vitae voluptate voluptatem.
    </div>
    <div>Eligendi error eveniet illo, iusto magnam magni maiores maxime minus modi molestiae praesentium quo repudiandae
        sed sit temporibus ullam ut! Accusamus, cum molestias officiis omnis perspiciatis quaerat quibusdam? Officia,
        totam.
    </div>
    <div>Adipisci autem corporis debitis delectus dolorem fuga harum minima nam omnis placeat quaerat quam quasi, rem
        sequi voluptatibus. Aut blanditiis dolore dolores labore nihil pariatur porro possimus quia sequi voluptatum.
    </div>
    <div>Autem in incidunt inventore iusto, officia quasi rerum veritatis voluptatem voluptatum! Ab aliquam aspernatur
        cupiditate fuga fugit illum magnam, nesciunt placeat provident qui quia quidem sapiente sequi totam vel
        veritatis.
    </div>
    <div>Ad consectetur consequuntur debitis fugiat, fugit iste iusto laboriosam laborum minima minus modi mollitia
        nesciunt praesentium quasi quis reiciendis, rerum sapiente similique temporibus velit? Error incidunt nulla
        praesentium quis voluptatem.
    </div>
    <div>Alias, architecto blanditiis deserunt natus praesentium reiciendis sunt? A ad consequatur corporis, dignissimos
        dolorem enim explicabo facere fuga fugit illum ipsa minima, provident quas quos repellat rerum vitae voluptate.
        Blanditiis?
    </div>
    <div>Ab ad aliquid animi commodi consequuntur deleniti deserunt et explicabo fugiat harum maxime molestias quaerat
        rerum veniam, voluptate. Ea ex mollitia quidem recusandae voluptate voluptates! Architecto delectus molestias
        mollitia vitae.
    </div>
    <div>Accusamus asperiores atque corporis cum, dolor excepturi ipsam ipsum itaque iusto minima molestias natus nemo
        nisi numquam odio odit perferendis quod recusandae sint sit tempora totam vel velit voluptate voluptatibus.
    </div>
    <div>Adipisci aliquam animi consequatur delectus distinctio doloremque dolores ea eaque eligendi harum iste nulla
        omnis perferendis quae rem suscipit, tenetur? Accusamus aliquid cum facilis in minus quaerat quas sapiente
        velit!
    </div>
    <div>Deserunt explicabo facere in sapiente soluta. A aliquam amet blanditiis consectetur dignissimos dolore
        doloremque ducimus eius, in, inventore ipsam magni nostrum, placeat quos rerum sint vel voluptas! A, dolor eius.
    </div>
    <div>Illo libero officiis voluptates? Adipisci amet aperiam architecto, atque culpa, distinctio doloremque doloribus
        esse expedita fuga ipsa iste laudantium mollitia nam nisi obcaecati praesentium, quis quos reprehenderit sequi
        voluptas voluptates?
    </div>
    <div>Accusantium ad alias aliquid atque commodi consequatur doloribus eaque earum eius explicabo facere, facilis
        laborum maxime nam natus nobis quam quas quasi quo rem repellat voluptas voluptate. Cupiditate, officiis, sint.
    </div>
    <div>Accusantium, alias atque beatae cumque earum enim et explicabo fuga fugiat fugit impedit in incidunt iusto
        magni minus molestiae nam nulla numquam odio quas quibusdam quidem, quis reprehenderit vero voluptatum.
    </div>
    <div>Eum molestiae nulla quis tenetur. Adipisci amet beatae, ipsam quae ullam vel! Accusantium aliquam consequuntur
        cum doloribus iste itaque laboriosam laudantium magni numquam odit perferendis, sed sit vel, vero voluptas.
    </div>
    <div>Delectus, eius, iusto. Adipisci corporis est eveniet exercitationem illum maxime necessitatibus ullam! Eius ex
        excepturi fugit illo veritatis vitae. Consectetur dolorem laboriosam laudantium magnam tempore. Assumenda
        consequuntur corporis quae quis!
    </div>
    <div>Animi consequatur cum cumque debitis deserunt et eum excepturi expedita, explicabo inventore ipsa iste labore
        magni maiores omnis optio perspiciatis quis, quo ratione saepe ut velit veniam! Aspernatur atque, ex.
    </div>
    <div>Consectetur consequatur dolore eaque facere facilis fuga itaque labore laborum, libero magni maxime molestiae
        numquam, perferendis qui repudiandae! Aperiam commodi culpa deleniti hic laboriosam nisi optio quis sequi,
        tenetur vel.
    </div>
    <div>Harum nulla porro quasi quod! Accusamus aut blanditiis cupiditate deserunt, doloremque, eum in inventore maxime
        minus nam necessitatibus nisi officiis pariatur quam quibusdam reiciendis sint, sunt tempora tempore ut
        voluptate.
    </div>
    <div>Eaque explicabo in minus quisquam sunt. Cupiditate doloremque doloribus eius esse eum ex fugiat inventore
        minima mollitia perferendis porro possimus provident quam quas quo reprehenderit rerum ut velit, voluptate
        voluptates?
    </div>
    <div>Accusantium architecto aspernatur deserunt exercitationem facere ipsum iste laborum magni minima, mollitia non
        odio officiis, possimus quo reiciendis ullam veniam! Debitis facilis maxime omnis, praesentium ratione
        reiciendis sapiente tempore unde.
    </div>
    <div>Deleniti illum molestiae odio quam similique! Animi asperiores atque delectus deleniti dolorem doloribus ea
        eius est excepturi expedita maxime minima minus molestias, perspiciatis qui sapiente tenetur totam unde vero,
        voluptates!
    </div>
    <div>Animi aperiam assumenda dicta doloribus dolorum eveniet ex excepturi, harum illum ipsam laudantium libero
        minima molestias mollitia nam nostrum nulla quia quibusdam rerum tenetur. Dicta dolorem possimus quia reiciendis
        voluptate!
    </div>
    <div>Animi cupiditate distinctio ducimus ex in, iste officia, optio quae quas reprehenderit soluta suscipit ullam.
        Aliquid amet asperiores aut, cumque deserunt excepturi laudantium, nam nesciunt recusandae sit suscipit, tempore
        voluptate?
    </div>
    <div>Ad culpa, dignissimos dolores eligendi esse harum illo incidunt ipsa maxime minima perspiciatis, ratione sint
        ullam? A ad asperiores, corporis eveniet explicabo hic illum libero mollitia, nostrum quasi temporibus
        voluptates.
    </div>
    <div>Accusamus asperiores consequatur cupiditate delectus, doloribus eos est exercitationem incidunt labore, libero
        magnam mollitia numquam perferendis perspiciatis praesentium quae repudiandae sequi, soluta totam voluptatem!
        Consectetur doloribus ea expedita sunt temporibus?
    </div>
    <div>Accusamus consequuntur modi neque odio omnis quas sequi tempora temporibus veniam veritatis. Amet culpa
        dignissimos ducimus eveniet excepturi, expedita harum, itaque laudantium natus quam sequi sunt tempora totam,
        voluptatem voluptates?
    </div>
    <div>Ad alias amet minus. Ab architecto consequatur, dolorem enim ex nobis odio quia? Aperiam atque aut deleniti
        excepturi, harum iure laborum libero, magni nam non officia quae quaerat, tempore totam.
    </div>
    <div>Aliquid doloremque ex fugiat qui quidem temporibus vero vitae voluptatibus. Asperiores aspernatur consectetur
        dolores, eius eum incidunt iure magni neque perferendis possimus quam quas quod, quos reiciendis sunt tempora
        tempore!
    </div>
    <div>Asperiores autem consequuntur cum excepturi fugiat nemo, obcaecati officiis omnis quis reprehenderit sequi
        tempora tempore voluptatibus. Alias blanditiis cum, deleniti dolorum enim est iste natus nulla quidem soluta ut
        velit!
    </div>
    <div>Aut autem debitis dicta dolor dolorem esse est excepturi, fugiat, harum illo in modi molestiae, nam
        necessitatibus nulla officiis porro quae quidem quis recusandae repudiandae saepe suscipit totam vel voluptate?
    </div>
    <div>Esse, quisquam voluptatibus? A alias aliquam aut cum debitis distinctio dolor dolore dolores ea eligendi eos ex
        fuga illo laboriosam minima molestias quam quo, saepe tempore veniam! Dolore, molestias qui.
    </div>
    <div>Animi dicta dolore dolorum eaque iste nam placeat provident similique tempore voluptas. Cupiditate fugiat
        laboriosam magni necessitatibus nostrum, omnis quae ullam vel? Fugit maxime optio perferendis qui sapiente
        similique ut?
    </div>
    <div>A adipisci eaque error esse exercitationem facilis illum, itaque nam quae quaerat, qui vitae. Dolor, dolores
        repellendus! Amet at cumque, dicta, distinctio ea fugit hic ipsum, minus nihil similique veritatis!
    </div>
    <div>Aliquam aperiam aspernatur atque autem blanditiis commodi delectus earum harum incidunt iste, iure maiores
        molestiae nam nobis nulla odio omnis optio pariatur quibusdam ratione sapiente sed similique temporibus ut
        veniam?
    </div>
    <div>Aut dolorum fugit quas! Esse est in ipsum quia repudiandae suscipit veritatis vitae! Ab aliquid autem
        consequuntur culpa cum dignissimos dolores, eveniet excepturi, explicabo nemo nobis provident quam tempore
        voluptas?
    </div>
    <div>A ad adipisci amet aperiam assumenda dignissimos distinctio ducimus, eos harum in incidunt ipsam iusto
        molestias nam nesciunt odio officia omnis pariatur porro quos recusandae saepe suscipit, tempore veritatis vero.
    </div>
    <div>Aspernatur, cupiditate debitis et expedita iste quidem quod. A, accusantium deleniti, eveniet facilis hic
        inventore molestiae necessitatibus numquam quod rerum saepe unde ut voluptates. Consectetur ea error ipsa
        pariatur quod.
    </div>
    <div>Consequatur consequuntur dolore ea eligendi esse et exercitationem fugit laudantium maxime nobis nostrum
        obcaecati odio odit omnis perferendis perspiciatis provident quaerat quas qui quod recusandae repudiandae saepe
        similique temporibus, ut?
    </div>
    <div>Aliquam amet at cumque dignissimos, excepturi ipsa laudantium quibusdam quo ratione sit vero voluptatem.
        Doloribus harum perspiciatis quam saepe, sit velit. Aliquid culpa, illum laudantium nostrum placeat possimus
        repellat suscipit.
    </div>
    <div>Consequatur cupiditate ea id magnam nihil qui quis reiciendis vitae? Harum iste laudantium maxime nesciunt,
        praesentium recusandae sint! At cupiditate dolore iure maxime sequi. Eligendi impedit itaque libero quam
        recusandae.
    </div>
    <div>Alias aliquid autem blanditiis consequatur doloremque doloribus eligendi error et eveniet ex illo ipsum maiores
        maxime minima nobis nostrum odio perspiciatis quasi quia quod recusandae saepe sequi, sit totam veritatis.
    </div>
    <div>Aliquid, autem corporis dolores fugiat, maxime molestias nemo odit praesentium quae rem tenetur voluptatibus.
        Alias commodi consectetur consequuntur doloremque, doloribus facilis libero magnam, maxime omnis quam quis
        temporibus totam voluptatibus?
    </div>
    <div>Explicabo modi nisi quibusdam quos! Ab adipisci atque beatae culpa cumque dicta ducimus earum eius eligendi
        expedita facilis fugiat impedit incidunt maiores perspiciatis reprehenderit saepe sequi suscipit veritatis vero,
        voluptatum!
    </div>
    <div>Adipisci aut blanditiis cumque dicta distinctio ea eaque earum eius, enim esse ex harum impedit inventore ipsa
        iste, iure molestias nisi odio quia repellendus ut vel veritatis vero voluptate voluptatum.
    </div>
    <div>Aliquid animi at cupiditate doloremque doloribus dolorum ducimus eaque earum expedita hic ipsa laboriosam,
        minus neque, odio omnis pariatur placeat provident quas quasi ratione sapiente totam ut veniam voluptatem
        voluptates.
    </div>
    <div>Blanditiis culpa dolorum eligendi ex excepturi exercitationem impedit, incidunt minima, nemo neque quaerat
        quibusdam quos veritatis. Asperiores culpa debitis facere illo illum, iste mollitia nam obcaecati, quia
        repellendus, sapiente voluptatum!
    </div>
    <div>A amet dolore eaque fugiat impedit molestias natus nisi odit perspiciatis quae, quaerat, quas quo saepe! Ad
        aliquid corporis earum error fuga labore officia perspiciatis quaerat repellendus sed? Harum, quae!
    </div>
    <div>Aliquam aspernatur at commodi dolores, eaque facilis, fugiat modi nesciunt non odio perferendis quia recusandae
        reprehenderit repudiandae ut? At dignissimos earum, excepturi fuga laboriosam laborum molestiae quas qui
        quisquam voluptatum?
    </div>
    <div>Aliquid architecto beatae consequuntur cumque cupiditate, debitis excepturi fuga itaque magnam mollitia
        necessitatibus obcaecati, officiis, optio pariatur quos reiciendis rem sapiente tempora veniam voluptate.
        Debitis dolorum eveniet ipsam quae quibusdam?
    </div>
    <div>Eaque enim ipsam ipsum odit, praesentium quia reiciendis voluptatum! Deserunt dignissimos, tenetur! Architecto
        dolore, eaque facere fugit harum hic labore maxime minus non placeat quia quo repellendus ullam, velit
        veritatis.
    </div>
    <div>Consectetur culpa cumque dolores excepturi magni nihil obcaecati perferendis repudiandae ullam voluptatibus.
        Aut consequatur dolorem fugiat hic in magnam officiis quae quas reprehenderit tempora? Cumque dolores eligendi
        in saepe vero!
    </div>
    <div>Ea exercitationem fuga illo impedit quibusdam! A autem debitis distinctio harum itaque obcaecati possimus
        quisquam quod unde, voluptate. Blanditiis dignissimos dolor, doloremque error inventore molestias nobis
        perspiciatis provident tempore ullam?
    </div>
    <div>Culpa eos necessitatibus odit. Illo iste, sunt. Ab animi architecto beatae commodi consequatur dicta distinctio
        dolorem eius enim, eveniet fugiat incidunt ipsa minus nostrum obcaecati perferendis perspiciatis quibusdam vero
        vitae!
    </div>
    <div>A adipisci aliquam architecto assumenda cupiditate dicta doloribus eaque eos ex expedita facilis hic incidunt
        ipsam iure maiores molestias nostrum pariatur praesentium quaerat quas, quia reiciendis soluta sunt vero vitae.
    </div>
    <div>Accusamus asperiores corporis deserunt dignissimos dolor dolorem eligendi eos est hic id illum impedit in
        itaque, labore, maiores maxime nihil odio quae quas quasi quis saepe soluta, temporibus vitae voluptatibus.
    </div></div>
</body>
</html>